﻿<div class="flex-container">
    @(Html.DevExtreme().PieChart()
        .ID("pie")
        .ElementAttr("class", "flex-block")
        .Palette(VizPalette.Material)
        .PaletteExtensionMode(VizPaletteExtensionMode.Blend)
        .Series(s => s.Add())
        .Legend(l => l.Visible(false))
        .DataSource(Enumerable.Repeat(1, 20).Select((val, index) => new {
            val = val,
            arg = String.Format("Item{0}", index)
        }))
        .OnDrawn(@<text>
            function(e) {
                var paletteName = e.component.option("palette"),
                palette = DevExpress.viz.getPalette(paletteName).simpleSet,
                paletteContainer = $(".palette-container");

                paletteContainer.html("");

                palette.forEach(function(color) {
                    $("<div>").css({
                        backgroundColor: color
                    })
                    .addClass("palette-item")
                    .appendTo(paletteContainer);
                });
        }
        </text>)
    )

    <div class="palette-container flex-block"></div>
</div>

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        <span>Palette</span>
        @(Html.DevExtreme().SelectBox()
            .Value("Material")
            .Items(new[] { "Material", "Soft Pastel", "Harmony Light", "Pastel", "Bright", "Soft", "Ocean", "Office", "Vintage", "Violet", "Carmine", "Dark Moon", "Soft Blue", "Dark Violet", "Green Mist" })
            .OnValueChanged(@<text>
                function(e) {
                    $("#pie").dxPieChart({
                        palette: e.value
                    });
                }
            </text>)
        )
    </div>
    <div class="option">
        <span>Palette Extension Mode</span>
        @(Html.DevExtreme()
            .SelectBox()
            .Value("Blend")
            .Items(Enum.GetNames(typeof(VizPaletteExtensionMode)))
            .OnValueChanged(@<text>
                function(e) {
                    $("#pie").dxPieChart({
                        paletteExtensionMode: e.value.toLowerCase()
                    });
                }
            </text>)
        )
    </div>
</div>
